<template>
    <div class="shade">
        <div class="content">
            <div class="close" @click="hide">×</div>
            <div>
                <input type="text" v-model="phone">
            </div>
            <div>
                <input type="password" v-model="password">
            </div>
            <div>
                <button @click="login()">登录</button>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            phone: '',
            password: ''
        }
    },
    methods: {
        register() {
            // 发请求，把手机号和密码存起来
            axios.post('/register', {
                phone: this.phone,
                password: this.password
            }).then(res => {
                if(res.data.code === 1) {
                    alert('恭喜，注册成功')
                } else{
                    alert('注册失败')
                }
            })
        },
        login() {
            // 发请求
            axios.post('/login', {
                phone: this.phone,
                password: this.password
            }).then(res => {
                if(res.data.code === 1) {
                    localStorage.setItem('isLogin', true)
                    localStorage.setItem('phone', this.phone)
                    alert('登陆成功')
                } else{
                    localStorage.setItem('isLogin', false)
                    alert('登录失败')
                }
            })
        },
        hide() {
            this.$emit('hideLogin')
        }
    },
}
</script>
<style lang="scss" scoped>
    .shade {
        position: fixed;
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.6);
        .content {
            width: 300px;
            background: #fff;
            padding: 10px;
            position: fixed;
            left: 50%;
            top: 30%;
            transform: translateX(-50%);
            .close {
                position: absolute;
                top: 5px;
                right: 5px;
                cursor: pointer;
            }
        }
    }
</style>